<template>
    <V3Echarts :options="option" :width="props.width" :height="optionHeight" />
</template>

<script setup lang="ts">
import { PropType, ref, watch } from 'vue'
import * as echarts from 'echarts'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'
import { Bar_TOOLTIP, Rank_TOOLTIP } from '@/stories/components/charts/chartConfig'

type optionDataType = {
    data: Number[]
    name: String[]
}

const props = defineProps({
    width: {
        type: Number,
        default: 800
    },
    optionHeight: {
        type: Number,
        default: 350
    },
    optionData: {
        type: Object as PropType<optionDataType>,
        default: () => {
            return {
                data: [120, 90, 70, 60, 50, 40, 30, 35, 40, 30, 35],
                name: ['设备主动工单', '咨询记录', '巡更主动工单', '安全服务', '品质问题整改', '环境服务', '设备设施', '综合服务', '邮件派发', '标样记录']
            }
        }
    }
})

const option = ref()

const initOption = () => {
    option.value = {
        grid: {
            //图表距离上下左右的距离
            top: '0%',
            bottom: '10%',
            right: '5%',
            left: '0%',
            containLabel: true
        },
        tooltip: Rank_TOOLTIP,
        xAxis: {
            type: 'value',
            show: true,
            splitLine: {
                show: false,
                lineStyle: {
                    type: 'dashed',
                    color: '#7F9BAE'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(255,255,255,0.8)'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                color: 'rgba(255,255,255,0.8)',
                fontSize: 10
            }
        },
        yAxis: [
            {
                type: 'category',
                triggerEvent: true,
                show: true,
                inverse: true, //是否反转
                boundaryGap: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.8)'
                    }
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    color: 'rgba(255,255,255,0.8)',
                    align: 'right',
                    margin: 10,
                    fontSize: 10
                },
                data: props.optionData?.name
            },
            {
                type: 'category',
                inverse: true,
                axisTick: 'none',
                axisLine: 'none',
                show: true,
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                        fontFamily: 'PangMenZhengDao'
                    }
                },
                data: props.optionData?.data
            }
        ],
        series: [
            {
                name: '',
                type: 'bar',
                barWidth: 10,
                yAxisIndex: 0,
                data: props.optionData?.data,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 0,
                            color: 'rgba(32, 215, 255,0)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(32, 215, 255,1)'
                        }
                    ])
                }
            }
        ]
    }
}

watch(
    () => props,
    () => {
        initOption()
    },
    {
        immediate: true,
        deep: true
    }
)
</script>

<style scoped lang="scss"></style>
